﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Project Board</title>
    <script src="assets/scripts/Utility/DOMHelper.js"></script>

<!--    <script src="assets/scripts/App/Tooltip.js" defer type="module"></script>-->
<!--    <script src="assets/scripts/App/ProjectItem.js" defer></script>-->
<!--    <script src="assets/scripts/App/ProjectList.js" defer></script>-->

    <script src="assets/scripts/app.js" defer type="module"></script>
    <link rel="stylesheet" href="assets/styles/app.css">
</head>
<body>
<template id="tooltip">
    <h2>More Info</h2>
    <p></p>
</template>
<header id="main-header">
    <h1>Project Planner</h1>
</header>
<section id="active-projects">
    <header>
        <h2>Active Projects</h2>
    </header>
    <ul>
        <li id="p1" data-extra-info="Got lifetime access,but would be nice to finish" class="card">
            <h2>Finish the Course</h2>
            <p>Finish the course within the next two weeks</p>
            <button class="alt">More Info</button>
            <button>Finish</button>
        </li>
        <li id="p2" data-extra-info="Not really a business topic but still important." class="card">
            <h2>Buy Groceries</h2>
            <p>Don't forget to pick up groceries today.</p>
            <button class="alt">More Info</button>
            <button>Finish</button>
        </li>
    </ul>
</section>
<section id="finished-projects">
    <header>
        <h2>Finished Projects</h2>
    </header>
    <ul>
        <li id="p3" data-extra-info="Super important conference!Fictional but still!" class="card">
            <h2>Book Hotel</h2>
            <p>
                Academind conference takes place in December,don't forget to book hotel.
            </p>
            <button class="alt">More Info</button>
            <button>Finish</button>
        </li>
    </ul>
</section>
</body>
</html>